<template>
  <div id="login">
    <div class="login-warrp">
      <h2>代付后台管理系统</h2>
      <div id="form">
        <p><i><img src="./user.png" alt=""></i><input type="text" placeholder="请输入用户名" v-model="useName"/></p>
        <p><i><img src="./pass.png" alt=""></i><input type="password" placeholder="输入密码" v-model="password" @keydown.enter="submit"/></p>
        <p><button class="btn-lg" @click="submit" v-loading="is_login">登录</button></p>
        <p><el-checkbox v-model="checked" @change="check_checkbox">记住密码</el-checkbox></p>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    name: "login",
    data(){
      return{
        useName:localStorage['useName'], //用户名
        password:localStorage['password'], // 密码
        reg_password:/^[\w\W]{6,18}$/,// 密码
        checked:false,
        is_login: false // 是否正在登陆
      }
    },
    methods:{
      submit(){
        if (!this.useName) {
          this.ElementUIMsg({
            message: '用户名不能为空',
            showClose: true,
            duration:2000,
            type:"error"
          });

          return false;
        }

        if (!this.check_password(this.password, this.reg_password)) { // 密码
          // 密码验证不通过
          return false;
        }

        if (this.checked) { // 缓存
          localStorage['useName'] = this.useName;
          localStorage['password'] = this.password;
        } else {
          localStorage['useName'] = '';
          localStorage['password'] = '';
        }

        this.is_login = true; // 显示正在登陆加载框

        this.axios.post('admin/publics/login', {
          username: this.useName,
          password: this.password
        }).then((res) => {
          this.is_login = false; // 关闭加载框
          if(res.data.code === 1) {
            // 保存token
            localStorage['token'] = res.data.token;
            this.$router.push({
              path: '/index'
            });
          } else {
            this.ElementUIMsg({
              message: res.data.msg,
              showClose: true,
              duration:2000,
              type:"error"
            });
          }
        });
      },
      check_password (pass,reg) { // 验证密码
        if (!pass) {
          this.ElementUIMsg({
            message: '请输入密码',
            showClose: true,
            duration:2000,
            type:"error"
          });
          return false;
        } else if (pass.match(/\s/)) {
          this.ElementUIMsg({
            message: '密码不能含有空格',
            showClose: true,
            duration:2000,
            type:"error"
          });
          return false;
        } else if (!reg.test(pass)) {
          this.ElementUIMsg({
            message: '密码只能是6~18位的数字、大小写字符、下划线',
            showClose: true,
            duration:2000,
            type:"error"
          });
          return false;
        }
        return true;
      },
      check_checkbox(){
        if(this.checked){
          localStorage.setItem('username',this.useName);
          localStorage.setItem('password',this.password)
        }else{
          localStorage.removeItem("username");
          localStorage.removeItem("password");
        }
      }
    }
  }
</script>

<style scoped>
  #login {
    width: 100%;
    height:100%;
    max-height: 100%;
    min-height: 690px;
    min-width: 420px;
    max-width: 100%;
    position:absolute;
    z-index: 100;
    background: url("bg.png") no-repeat top center;
    background-size: cover;
  }
  .login-warrp{
    width: 380px;
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
  }
  .login-warrp h2{
    font-size: 40px;
    text-align: center;
    font-weight: 600;
    color: #fff;
    text-shadow: 2px 4px 4px #051d41;
    margin-bottom: 50px;
  }
  #form {
    width: 380px;
    height: 358px;
    padding-top: 20px;
    box-sizing: border-box;
    background: url("from.png") no-repeat;
    background-size: cover;
  }
  #form p{
    width: 270px;
    margin: 0 auto;
    height: 40px;
    border:1px solid #efeff0;
    background-color: #fbfbfc;
  }
  #form p i{
    display: inline-block;
    width: 38px;
    text-align: center;
    vertical-align: middle;
  }
  #form p input {
    width: 230px;
    background: none;
    color: #999999;
    height: 100%;
    font-size: 18px;
    margin-bottom: 20px;
  }

  #form p:first-child {
    margin-top: 45px;
  }
  #form p:last-child{
    background: none;
    border: none;
    margin-top: 10px;
  }
  #form p{
    margin-top: 30px;
  }
  #form p button {
    width: 100%;
    height: 40px;
    padding: 0;
    color: #fff;
    background-color: #2c78fc;
    text-align: center;
    font-size: 18px;
  }
</style>
